---
title: Структура проекта
description: Узнайте, как организовать проект с помощью Astro.
i18nReady: true
---
import { FileTree } from '@astrojs/starlight/components';

Ваш новый проект Astro, созданный с помощью мастера командной строки `create-astro`, уже включает в себя некоторые файлы и папки.
Другие вы создадите сами и добавите в существующую файловую структуру Astro.

Вот как организован проект Astro, и некоторые файлы, которые вы найдете в своем новом проекте.

## Директории и Файлы

Astro использует определенную структуру папок для вашего проекта. В корне каждого проекта Astro должны быть следующие директории и файлы:

- `src/*` - Исходный код вашего проекта (компоненты, страницы, стили, и т.д.)
- `public/*` - Статичные файлы (шрифты, иконки, и т.д.)
- `package.json` - Манифест проекта.
- `astro.config.mjs` - Файл конфигурации Astro. (рекомендуется)
- `tsconfig.json` - Файл конфигурации TypeScript. (рекомендуется)

### Пример дерева проекта

Структура обычного Astro проекта может выглядеть так:

<FileTree>
- public/
  - robots.txt
  - favicon.svg
  - social-image.png
- src/
  - components/
    - Header.astro
    - Button.jsx
  - layouts/
    - PostLayout.astro
  - pages/
    - posts/
      - post1.md
      - post2.md
      - post3.md
    - index.astro
  - styles/
    - global.css
- astro.config.mjs
- package.json
- tsconfig.json
</FileTree>

### `src/`

Директория `src/` это место, где находится большая часть исходного кода вашего проекта. Сюда входят:

- [Страницы](/ru/basics/astro-pages/)
- [Макеты](/ru/basics/layouts/)
- [Astro компоненты](/ru/basics/astro-components/)
- [Компоненты UI фреймворков (React и т. д.)](/ru/guides/framework-components/)
- [Стили (CSS, Sass)](/ru/guides/styling/)
- [Markdown](/ru/guides/markdown-content/)

Astro обрабатывает, оптимизирует и объединяет ваши файлы из src/, чтобы создать окончательный веб-сайт, который отправляется в браузер. В отличие от статической директории public/, ваши файлы из src/ собираются и обрабатываются Astro.

Некоторые файлы (например, Astro компоненты) не отправляются в браузер в том виде, в каком они написаны, а вместо этого отображаются в статическом HTML. Другие файлы (например, CSS) отправляются в браузер, но могут быть оптимизированы или объединены с другими файлами CSS для повышения производительности.

:::tip
Хотя в этом руководстве описываются некоторые популярные соглашения, используемые в сообществе Astro, единственные зарезервированные директории Astro - это `src/pages/` и `src/content/`. Вы можете свободно переименовывать и реорганизовывать любые другие директории так, как вам удобно.
:::

### `src/components`

**Компоненты** - это многократно используемые блоки кода для ваших HTML-страниц. Это могут быть [компоненты Astro](/ru/basics/astro-components/), или [компоненты UI-фреймворка](/ru/guides/framework-components/) такие как React или Vue. Обычно все компоненты вашего проекта группируются и упорядочиваются в этой папке.

Это общее соглашение в проектах Astro, но оно не является обязательным. Вы вольны организовывать свои компоненты так, как вам удобно!

### `src/content`

Директория `src/content/` зарезервирована для хранения [коллекций контента](/ru/guides/content-collections/) и файла конфигурации коллекций (по желанию). В этой папке не допускается наличие других файлов.

### `src/layouts`

[Макеты](/ru/basics/layouts/) - это компоненты Astro, которые определяют структуру пользовательского интерфейса, разделяемую одной или несколькими [страницами](/ru/basics/astro-pages/).

Как и `src/components`, эта директория является общепринятой, но не обязательной.

### `src/pages`

[Страницы](/ru/basics/astro-pages/) - это особый вид компонентов, используемых для создания новых страниц на вашем сайте. Страница может быть компонентом Astro или файлом Markdown, который представляет собой какую-то страницу контента для вашего сайта.

:::caution
`src/pages` это **обязательная** под-директория в вашем Astro проекте. Без неё ваш сайт не будет иметь страниц или маршрутов!
:::

### `src/styles`

Распространенным соглашением является хранение ваших файлов CSS или Sass в папке `src/styles`, но это не обязательно. Пока ваши стили находятся где-то в директории `src/` и правильно импортируются, Astro будет обрабатывать и оптимизировать их.

### `public/`

Директория `public/` предназначена для файлов и ресурсов в вашем проекте, которые не требуют обработки во время сборки Astro. Файлы в этой папке будут скопированы в папку сборки без изменений, после чего будет создан ваш сайт.

Это поведение делает `public/` идеальным местом для общих ресурсов, таких как изображения и шрифты, или специальных файлов, таких как `robots.txt ` и `manifest.webmanifest`.

Вы можете помещать CSS и JavaScript в вашу директорию public/, но имейте в виду, что эти файлы не будут объединены или оптимизированы в вашей конечной сборке.

:::tip
Как правило, любой CSS или JavaScript, который вы пишете самостоятельно, должен находиться в директории `src/`.
:::

### `package.json`

Это файл, используемый менеджерами пакетов JavaScript для управления зависимостями. Он также определяет скрипты, которые обычно используются для запуска Astro (например, `npm start`, `npm run build`).

В файле `package.json` есть [два вида зависимостей](https://docs.npmjs.com/specifying-dependencies-and-devdependencies-in-a-package-json-file): `dependencies` и `devDependencies`. В большинстве случаев они работают одинаково:  Astro нуждается во всех зависимостях на этапе сборки, и ваш менеджер пакетов установит оба. Мы рекомендуем начать с помещения всех ваших зависимостей в `dependencies`, и использовать `devDependencies` только при наличии конкретной необходимости.

Для помощи в создании нового файла `package.json` для вашего проекта,  ознакомьтесь с инструкциями по [ручной установке](/ru/install/manual/).

### `astro.config.mjs`

Этот файл создается в каждом шаблоне стартера и включает в себя параметры конфигурации для вашего проекта Astro. Здесь вы можете указать используемые интеграции, параметры сборки, параметры сервера и многое другое.

См. [Руководство по настройке Astro](/ru/guides/configuring-astro/) для получения подробной информации о настройке конфигураций.

### `tsconfig.json`

Этот файл создается в каждом стартовом шаблоне и включает параметры конфигурации TypeScript для вашего проекта Astro.
Некоторые функции (например, импорт пакетов npm) не полностью поддерживаются в редакторе без файла `tsconfig.json`.

См. [Руководство по TypeScript](/ru/guides/typescript/) для получения подробной информации о настройке конфигураций.
